<template>
  <el-dialog :close-on-click-modal="false" title="详情" :visible="show" :before-close="close">
    <el-card class="mb20">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions :column="1" border>
            <template v-for="(field, index) in fields">
              <el-descriptions-item v-if="field.type == 'FILE'" :key="field.field" :label="field.name">
                <el-tag color="blue">
                  <a :href="instance[field.field]">{{ instance[field.field] }}</a>
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-else-if="field.type == 'LOCATION'" :key="field.field" :label="field.name">
                {{ instance[field.field] }}
              </el-descriptions-item>
              <el-descriptions-item v-else-if="field.type == 'IMAGE'" :key="field.field" :label="field.name">
                <ImagePreview :width="200" :src="instance[field.field]"></ImagePreview>
              </el-descriptions-item>
              <el-descriptions-item v-else-if="field.type == 'VIDEO'" :key="field.field" :label="field.name">
                <div style="display: flex; flex-wrap: wrap">
                  <video :width="200" v-for="(video, i) in instance[field.field].split(',')" :key="i" :src="video" controls></video>
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-else :key="field.field" :label="field.name">{{ instance[field.field] }}</el-descriptions-item>
            </template>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in history" :key="index" :timestamp="item.gmtCreate">
              <el-row>
                <el-col :span="24">
                  <span>{{ item.name }}</span>
                </el-col>
              </el-row>
              <el-row v-if="item.executorName">
                <el-col :span="24">
                  <i class="el-icon-user"></i>
                  <span class="ml10">{{ item.executorName }}</span>
                </el-col>
              </el-row>
              <el-row v-if="item.gmtFinished">
                <el-col :span="24">
                  <i class="el-icon-date"></i>
                  <span class="ml10">{{ item.gmtFinished }}</span>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mb20">
      <el-row :gutter="20">
        <!-- <el-col :span="6">
          本月考勤异常
          <span style="color: green">1次 ></span>
        </el-col> -->
        <el-col :span="6">
          本月请假
          <span style="color: green">{{count.leave}}次 ></span>
        </el-col>
        <el-col :span="6">
          本月调休
          <span style="color: green">1次 ></span>
        </el-col>
        <el-col :span="6">
          本月加班
          <span style="color: green">{{count.overtime}}次 ></span>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="slDtl.status == 10">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="处置操作" prop="ARG_OPERATE_TYPE">
          <el-radio-group v-model="form.ARG_OPERATE_TYPE">
            <el-radio label="HANDLE">通过</el-radio>
            <el-radio label="REJECT">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处置备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button v-if="slDtl.status == 10" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { recordDtl, taskDtl, execute, getCountByMember } from '@/api/flow';
export default {
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  watch: {
    item: {
      handler(val) {
        val.id && this.getDtl();
      },
      immediate: true
    }
  },
  data() {
    return {
      slDtl: {},
      instance: {},
      fields: [],
      history: [],
      taskFields: [],
      form: {},
      rules: {
        title: [
          {
            required: true,
            message: '请输入内容',
            trigger: ['change', 'input']
          }
        ]
      },
      count: {}
    };
  },
  methods: {
    getDtl() {
        getCountByMember({id: this.item.id}).then(res => {
            this.count = res.data;
        })
      recordDtl({ id: this.item.id }).then((res) => {
        this.slDtl = res.data?.instance || {};
        this.instance = res.data?.instance?.variables || {};
        this.fields = res.data?.schema?.fields || [];
        this.history = res.data?.history || [];
        if (res.data.instance.status == 10 && this.history.length) {
          const lastItem = this.history[this.history.length - 1];
          this.form.ARG_TASK_ID = lastItem.id;
          taskDtl({ id: lastItem.id }).then((task) => {
            this.taskFields = task.data.form?.fields;
          });
        }
        this.history.push({
          executorName: res.data.instance.creatorName,
          gmtCreate: res.data.instance.gmtCreate,
          name: res.data.instance.startNodeName
        });
        if (res.data.instance.status != 10) {
          this.history.unshift({
            executorName: '管理员',
            gmtCreate: res.data.instance.gmtFinished,
            name: res.data.instance.endNodeName
          });
        }
      });
    },
    submit() {
      this.form.ARG_USER_SYSTEM = 1;
      console.log('打印当前编辑：', this.form);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          execute(this.form).then((res) => {
            // 验证成功-编辑
            this.$emit('change', this.form);
            this.close();
          });
        }
      });
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
